<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.js"></script> -->

  <script src="https://cdn.hterobot.com/vue/public/js/href.js"></script>
  <script>
    function isIE() { //ie?
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      }
      if (!('Symbol' in window)) {
        return true
      }
      // var userAgent = navigator.userAgent.split(' ').map(function (e) { return e.split('/') }).filter(function (e) { return e.length > 1 })
      // var Firefox = userAgent.find(function (e) { e[0] === 'Firefox' })
      // if(Firefox && Number(Firefox[1].slice('.')[0]) > 32) {
      //   return true
      // }
    }

    if (isIE()) {
      window.open('https://cdn.hterobot.com/noipcode/hgkj.html')
    }
  </script>
  <link href="https://cdn.hterobot.com/noipcode/css/in.css" rel="stylesheet" />
  <link href="https://cdn.hterobot.com/noipcode/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="https://cdn.hterobot.com/fonts/FluentSystemIcons-Filled.css" />
  <script src="https://at.alicdn.com/t/font_2592711_mgoffxnmu9d.js"></script>
  <script src="https://at.alicdn.com/t/font_1940226_vfhwjpcg5bd.js"></script>
  <script src="https://at.alicdn.com/t/font_2630703_ausqbj8135o.js"></script>
  <!-- 胖达 -->
  <script src="//at.alicdn.com/t/c/font_4271319_mf64o0t41sq.js"></script>
  <!-- 隐藏ico -->
  <!-- <link rel="icon" href="https://cdn.hterobot.com/vue/public/favicon.ico" /> -->
  <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">

  <script>
    window.MathJax = {
      tex: {
        inlineMath: [
          ["$", "$"],
        ],
      },
      startup: {
        pageReady: function () {
          return window.MathJax.startup.defaultPageReady();
        },
      },

      svg: {
        fontCache: "global",
      },
    };
  </script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.hterobot.com//npm/mathjax/es5/tex-chtml.js"></script>
  <title>学习平台教师端</title>
</head>
<script>
  (function () {
    let currentScale = 1;
    let isScaled = false;

    function detectDeviceAndScale() {
      const userAgent = navigator.userAgent;
      const screenWidth = window.innerWidth;

      const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(userAgent);
      const isSmallScreen = screenWidth <= 768;
      const isPhone = isMobileUA && isSmallScreen && !/iPad/i.test(userAgent);

      console.log('设备检测结果:', { isPhone, screenWidth, isMobileUA });

      document.documentElement.classList.remove('mobile-device', 'phone-device', 'desktop-device');

      if (isPhone) {
        document.documentElement.classList.add('mobile-device', 'phone-device');

        const targetWidth = 1200;
        let scale = screenWidth / targetWidth;

        if (scale < 0.35) scale = 0.35;
        if (scale > 1.0) scale = 1.0;

        currentScale = scale;
        document.documentElement.style.setProperty('--phone-scale', scale);

        console.log(`🔥 手机端模式激活，缩放比例: ${scale.toFixed(3)}`);
        return true;
      } else {
        document.documentElement.classList.add('desktop-device');
        currentScale = 1;
        console.log('🖥️ 桌面/平板模式，不进行缩放');
        return false;
      }
    }

    function applyOrRemoveScale() {
      const mainContent = document.querySelector('.main');

      if (!mainContent) {
        console.log('⚠️ 未找到.main元素，稍后重试');
        return false;
      }

      const shouldScale = document.documentElement.classList.contains('phone-device');

      if (shouldScale) {
        // 应用缩放
        mainContent.style.transform = `scale(${currentScale})`;
        mainContent.style.transformOrigin = 'top left';
        mainContent.style.width = `${100 / currentScale}%`;

        isScaled = true;

        // 防止横向滚动
        document.body.style.overflowX = 'hidden';
        document.documentElement.style.overflowX = 'hidden';

        console.log(`✅ 缩放已应用: ${currentScale.toFixed(3)}`);
        return true;
      } else if (!shouldScale && isScaled) {
        // 移除缩放
        mainContent.style.transform = '';
        mainContent.style.transformOrigin = '';
        mainContent.style.width = '';

        document.body.style.overflowX = '';
        document.documentElement.style.overflowX = '';

        isScaled = false;
        console.log('❌ 缩放已移除');
        return true;
      }

      return false;
    }

    function handleResize() {
      detectDeviceAndScale();
      setTimeout(() => {
        applyOrRemoveScale();
      }, 100);
    }

    // 监听路由变化
    function setupRouteWatcher() {
      let lastPath = window.location.hash;

      window.addEventListener('hashchange', function () {
        const newPath = window.location.hash;
        if (newPath !== lastPath) {
          lastPath = newPath;
          console.log('🔄 路由变化检测到:', newPath);

          setTimeout(() => {
            applyOrRemoveScale();
          }, 300);
        }
      });

      // DOM变化监听
      const observer = new MutationObserver(function (mutations) {
        let shouldReapply = false;

        mutations.forEach(function (mutation) {
          if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(function (node) {
              if (node.nodeType === 1) {
                if (node.classList && node.classList.contains('main')) {
                  shouldReapply = true;
                  console.log('🆕 检测到新的.main元素');
                }
              }
            });
          }
        });

        if (shouldReapply && document.documentElement.classList.contains('phone-device')) {
          console.log('🔄 DOM变化触发缩放重新应用');
          setTimeout(() => {
            applyOrRemoveScale();
          }, 200);
        }
      });

      const appElement = document.getElementById('app');
      if (appElement) {
        observer.observe(appElement, {
          childList: true,
          subtree: true
        });
      }
    }

    // 初始化
    detectDeviceAndScale();

    function initScale() {
      let attempts = 0;
      const maxAttempts = 15;

      const tryApply = () => {
        attempts++;
        const success = applyOrRemoveScale();

        if (!success && attempts < maxAttempts) {
          console.log(`第${attempts}次尝试失败，继续重试...`);
          setTimeout(tryApply, 300);
        } else if (success) {
          console.log(`第${attempts}次尝试成功！`);
          setupRouteWatcher();
        } else {
          console.log(`达到最大重试次数(${maxAttempts})，停止尝试`);
          setupRouteWatcher();
        }
      };

      tryApply();
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initScale);
    } else {
      initScale();
    }

    window.addEventListener('resize', handleResize);
    window.addEventListener('orientationchange', function () {
      setTimeout(handleResize, 500);
    });

  })();
</script>

<body id="body">
  <div id="Loading">
    <!-- 默认display: none; -->
    <div class="loading position-fixed" style="display: none;">
      <div class="block"></div>
    </div>
  </div>
  <div id="app" class="sassMgmt"></div>
  <script type="module" src="/src/sassMgmt/main.ts"></script>
</body>

</html>